<!DOCTYPE html>
<html lang="en">
<head>
    {{ $task := index .TaskList 0 }}
    <meta charset="UTF-8">
    <title>浩盛Todo - 查看任务：{{ $task.Name }}</title>
    {{ template "imports" . }}
    <style>
        #check-form {
            width: 45%;
            margin-left: calc((100% - 45%) / 2);
        }
    </style>
</head>
<body>
<div class="container">
    {{ template "nav" . }}
    <article>
        <h2 class="m-4 text-center">查看任务</h2>
        <form action="" class="text-center" id="check-form">
            <section class="mb-2 input-group">
                <label for="task-date" class="input-group-text">任务日期：</label>
                <input type="text" class="form-control" id="task-date" name="date" value="{{ $task.Date }}" readonly>
            </section>
            <section class="mb-2 input-group">
                <label for="task-name" class="input-group-text">任务名称：</label>
                <input type="text" class="form-control" id="task-name" name="name" value="{{ $task.Name }}" readonly>
            </section>
            <section class="mb-2 input-group">
                <label for="task-desc" class="input-group-text">任务描述：</label>
                <textarea type="text" class="form-control" id="task-desc" rows="5" name="desc"
                          readonly>{{ $task.Desc }}</textarea>
            </section>
            <div class="btn-group" id="opt-btn-group"></div>
        </form>
    </article>
</div>
<script>
    $(function () {
        if ("{{ $task.State }}" === "incomplete") {
            createOptBtn("delete");
            createOptBtn("edit");
            createOptBtn("finish");
        } else if ("{{ $task.State }}" === "deleted") {
            createOptBtn("delete");
            createOptBtn("restore");
        } else if ("{{ $task.State }}" === "finished") {
            createOptBtn("delete");
            createOptBtn("restore");
        }
        $(".opt-btn").on("click", function () {
            location.href = `/task/${this.id.replace("-btn", "")}/{{ $task.Id }}`;
        });
    });

    function createOptBtn(opt) {
        let optColor = {"delete": "danger", "edit": "primary", "restore": "warning", "finish": "success"};
        let optIcon = {
            "delete": "trash",
            "edit": "pencil-square",
            "restore": "arrow-down-left-square",
            "finish": "check2-square"
        };
        let optText = {"delete": "删除", "edit": "更改", "restore": "还原", "finish": "完成"};
        let btn = document.createElement("button");
        btn.type = "button";
        btn.classList.add("btn");
        btn.classList.add(`btn-${optColor[opt]}`);
        btn.classList.add("opt-btn");
        btn.id = `${opt}-btn`;
        let btnText = document.createElement("span");
        btnText.classList.add("bi");
        btnText.classList.add(`bi-${optIcon[opt]}`);
        btnText.innerHTML = `${optText[opt]}任务`;
        btn.appendChild(btnText);
        $("#opt-btn-group").append(btn);
    }
</script>
</body>
</html>